import React, { Component } from "react";
import "../assets/css/ShopBagItem.css";
import {withRouter} from "react-router-dom"

class ShopBagItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      item: props.item,
    };
    this.ToDetail = this.ToDetail.bind(this)
  }

  ToDetail(){
    this.props.history.push("/commodityDetail/" + this.state.item.pid)
  }

  render() {
    return (
      <li className="ShopBagItem">
        <img
          className="ShopBagItem_cover"
          src={this.state.item.small_img ? this.state.item.small_img : this.state.item.smallImg}
          alt=""
          onClick={this.ToDetail}
        />
        <div className="ShopBagItem_text">
          <div>
            <div>
              <span className="ShopBagItem_text_name">{this.state.item.name}</span>
              <span className="ShopBagItem_text_rule">{this.state.item.rule}</span>
            </div>
            <span className="ShopBagItem_text_enname">{this.state.item.enname}</span>
          </div>
          <div className="ShopBagItem_text_bottom">
            <span className="ShopBagItem_text_price">￥{this.state.item.price * this.state.item.count + ".00"}</span>
            <span className="ShopBagItem_text_count">x{this.state.item.count}</span>
          </div>
        </div>
      </li>
    );
  }
}

export default withRouter(ShopBagItem);
